<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页 发现购物的乐趣</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./swiper-7.4.1/swiper/swiper-bundle.min.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }

        .swiper {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>

</head>

<body>
    <!-- 一级导航开始 -->
    <div class="header-top clearfix" id="nav-top">
        <nav>
            <a href="" class="logo"></a>
            <ul class="nav-right">
                <li><a href="https://iliangcang.com/i/our/aptitude">资质证照 / 协议规则</a></li>
                <li class="addshop"><a href="javascript:;">添加良品</a></li>
                <li class="message">
                    <a href="">消息</a>
                    <!-- 信息二级菜单开始 -->
                    <ul>
                        <li>动态<span>0</span></li>
                        <li>评论<span>0</span></li>
                        <li>私信<span>0</span></li>
                        <li>粉丝<span>0</span></li>
                        <li>喜欢<span>0</span></li>
                        <li>通知<span>0</span></li>
                    </ul>
                </li>
                <li class="cart-nav">
                    <a href="javascript:;" onclick="toMycart()">购物车</a>
                    <!-- 购物车二级菜单开始 -->
                    <ul>
                        <li>您的购物车暂时还没有商品...</li>
                        <li><a href="shop.html">快去抢购良仓商品吧</a></li>
                    </ul>

                </li>
                <li><a href="reg.html" class="reg">注册</a></li>
                <li><a href="login.html" class="login">登录</a></li>
            </ul>
        </nav>
    </div>
    <!-- 二级导航开始 -->
    <div class="subMenu">

        <ul class="clearfix">
            <li><a href="">首页</a> </li>
            <li class="cartcon">
                <a href="shop.html">商店</a>
                <!-- 商店二级菜单开始 -->
                <div class="cart-list">
                    <a href="#top-shop">家居</a>
                    <a href="#top-shop">文具</a>
                    <a href="#top-shop">数码</a>
                    <a href="#top-shop">玩乐</a>
                    <a href="#top-shop">餐厨</a>
                    <a href="#top-shop">美食</a>
                    <a href="#top-shop">服装</a>
                    <a href="#top-shop">鞋包</a>
                    <a href="#top-shop">配饰</a>
                    <a href="#top-shop">美护</a>
                    <a href="#top-shop">出行</a>
                    <a href="#top-shop">图书</a>
                    <a href="#top-shop">艺术</a>
                    <a href="#top-shop">水具</a>
                    <a href="#top-shop">运动</a>
                </div>
            </li>
            <li class="zazhicon">
                <a href="https://iliangcang.com/i/topic/">杂志</a>
                <!-- 杂志二级菜单开始 -->
                <div class="zazhi">
                    <a href="">趣物</a>
                    <a href="">数码</a>
                    <a href="">汽车</a>
                    <a href="">文化</a>
                    <a href="">时尚</a>
                    <a href="">美食</a>
                    <a href="">建筑</a>
                    <a href="">空间</a>
                    <a href="">圈子</a>
                    <a href="">清单</a>
                    <a href="">活动</a>
                    <a href="">视频</a>
                </div>
            </li>
            <li class="sharecon">
                <a href="https://iliangcang.com/i/class/">分享</a>
                <!-- 分享二级菜单开始 -->
                <div class="share-list">
                    <a href="">男士</a>
                    <a href="">家居</a>
                    <a href="">数码</a>
                    <a href="">工具</a>
                    <a href="">玩具</a>
                    <a href="">美容</a>
                    <a href="">孩子</a>
                    <a href="">宠物</a>
                    <a href="">饮食</a>
                    <a href="">运动</a>
                    <a href="">文化</a>
                    <a href="">女士</a>
                </div>
            </li>
            <li><a href="https://iliangcang.com/i/daren/">达人</a> </li>
            <li><a href="https://iliangcang.com/i/zixun/">有偿资讯</a> </li>
            <li></li>
        </ul>

    </div>
    <!-- 轮播图开始 -->
    <div class="lunbo">
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./img/1762.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./img/1766.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./img/1767.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./img/1768.gif" alt=""></div>
                <div class="swiper-slide"><img src="./img/1762.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./img/1769.jpg" alt=""></div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
        </div>

    </div>
    <!-- Swiper JS -->
    <script src="swiper-7.4.1/swiper/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper(".mySwiper", {
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    </script>
    <!-- 圣杯布局 商品展示 -->
    <div class="container__main">
        <!-- Left sidebar -->
        <div class="container__left">
            <img src="./img/商品1.jpg" alt="">
           <a href="https://www.iliangcang.com/i/topicapp/202112235654" target="_blank"><img src="./img/商品2.jpg" alt=""></a> 
        </div>

        <!-- Main content -->
        <div class="container__middle">
            <img src="./img/商品3.jpg" alt="">
        </div>

        <!-- Right sidebar -->
        <div class="container__right">
            <img src="./img/商品4.jpg" alt="">
            <img src="./img/商品5.jpg" alt="">

        </div>
    </div>
    <!-- 人气良品 -->
    <div class="Product-cart">
        <h2 id="top-shop">人气良品</h2>
        <!-- 列表 -->
        <div class="Product-cart-list">
            <!-- <div class="item">
                <img src="./img/商品1.jpg" alt="">
                <div class="imgcon">
                    <img src="./img/196.jpg" alt="">
                    <span>单向空间</span>
                    <span
                        style="float: right;background: url(./img/heart_gray20_18.png) no-repeat 7px 11px; width: 30px;height: 30px;"></span>
                    <span style="float: right;line-height: 40px;">668</span>
                </div>

            </div> -->

        </div>

    </div>

    </div>
    <!-- 列表结束 底部开始 -->

    <div class="more">
        <p>MORE</p>
    </div>

    <div class="service">
        <a href="">
            <p></p>
        </a>

        <div class="slogen">
            <dl>
                <dt></dt>
                <dd>
                    <p>全球精品</p>
                    <p>Global Selections</p>
                </dd>
            </dl>

            <dl>
                <dt></dt>
                <dd>
                    <p>正品保证</p>
                    <p>Authenticity Guaranteed</p>
                </dd>
            </dl>

            <dl>
                <dt></dt>
                <dd>
                    <p>全场包邮</p>
                    <p>Free Delivery</p>
                </dd>
            </dl>

            <dl>
                <dt></dt>
                <dd>
                    <p>400-897-6363</p>
                    <p>工作日 09:00-18:00</p>
                </dd>
            </dl>

        </div>

    </div>
    <!-- 售后结束尾部开始 -->
    <div class="footer">
        <div class="wrap">
            <div class="footleft">
                <div class="download">
                    <p><span>iPhone Android</span></p>
                    <p>客户端下载</p>
                </div>
                <div class="friendly">
                    <p>
                        <a href="">关于良仓</a>
                        <a href="">服务协议</a>
                        <a href="">隐私保护政策</a>
                        <a href="">使用指南</a>
                        <a href="">联系我们</a>
                        <a href="">加入我们</a>
                        <a href="">友情链接</a>
                        <a href="">私信良仓</a>
                    </p>

                    <p>
                        <span>©</span>
                        2013-2019 北京良仓文化传播有限公司版权所有
                    </p>
                    <p> &nbsp;&nbsp; 公司名称：北京良仓文化传播有限公司 电话：010-58696733</p>
                    <p> &nbsp;&nbsp; 公司地址：北京朝阳区百子湾路32号6号楼1层60号.</p>
                    <p> &nbsp;&nbsp; 社会信用统一代码：91110105059231575L 食品许可证：JY11105160159557 </p>
                    <p> &nbsp;&nbsp; 图书证名称：中华人民共和国出版物经营许可证 图书证编号：新出发京零 字第 朝 150051 号 </p>
                    <p>&nbsp;&nbsp; 京ICP备13010677号 京公网安备&nbsp;&nbsp;11010502025627</p>

                </div>

            </div>

            <div class="footright">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>

            </div>
        </div>


    </div>

    <!-- 尾部结束 右固定锚点开始 -->

    <div class="right-btn">
        <img src="./img/30892.png" alt="">
    </div>
    <div class="bottom-btn">
        <a href="#nav-top"></a>
    </div>
    <div class="popbar">
        <a href="javascript:;">联系客服</a>
    </div>

    <div class="kefu">
        <p>如有问题，请联系运营</p>
        <p><span style="margin-right: 20px;">tel:</span>13598613871</p>
        <button>关闭</button>

    </div>
    <script>
        /*   所有商品接口
         get
         参数
         pagesize  每页获取几个数据
         pagenum 获取第几页数据
         uid  用户id
         http://jx.xuzhixiang.top/ap/api/allproductlist.php?pagesize=20&pagenum=4 */

        let pagesize = 18;
        let pagenum = 2;
        // 用户id
        let id = localStorage.getItem("id");
        let token = localStorage.getItem("token");

        let productArr;

        laodList();
        // 封装加载商品列表的函数 --- 页面一开始需要 加载商品列表-- 发布了商品列表得更新 加载商品列表
        function laodList() {
            let listAPI = "http://jx.xuzhixiang.top/ap/api/allproductlist.php";

            $.get(listAPI, { pagesize, pagenum, uid: id, }).then(r => {
                console.log(r);
                productArr = r.data;

                // 根据商品数组- 拼接字符串 给ul
                let str = "";
                productArr.forEach((pObj) => {

                    str += `
            <div class="item">
                <a href="item.html?id=${pObj.pid}">
                <img src="${pObj.pimg}" alt="">
                <div class="imgcon">
                    <img src="${pObj.pimg}" alt="">
                    <span>${pObj.pname}</span>
                    <span
                        style="float: right;background: url(./img/heart_gray20_18.png) no-repeat 7px 11px; width: 30px;height: 30px;"></span>
                    <span style="float: right;line-height: 40px;">668</span>
                </div>
                </a>

            </div>
            `;
                });

                $(".Product-cart-list").html(str)
            });
        }
        //判断是否登录跳转页面
        function toMycart() {
            let uid = localStorage.getItem("id");
            if (uid) {
                location.href = "cart.html"
            } else {
                location.href = "login.html"
            }
        }

        //判断是否登录
        let Mytoken = localStorage.getItem("token");
        let Myusername = localStorage.getItem("username")
        console.log(Mytoken);
        console.log(Myusername);
        if (Mytoken) {
            $(".addshop").click(function () {
                location.href = "./后台管理/index.html"
            })
            $(".reg").html(Myusername)
            $(".login").html("hello")
        } else {
            $(".addshop").click(function () {
                alert("请您登录账号后再操作哈")
            })
        }

        //联系客服按钮控制
        $(".popbar a").click(function () {
            $(".kefu").css("display", "block")
        })
        $(".kefu button").click(function () {
            $(".kefu").css("display", "none")
        })

    </script>
</body>

</html>